<template>
  <div class="sign">
    <div class="sign-top">
      <a-button
        class="btn"
        :class="EntInfo.status != 0 ? 'downBtn' : ''"
        @click="exportPdf"
        >下载</a-button
      >
      <!-- <a-button type="primary" class="btn" @click="showModal" v-if="EntInfo.status != 0">签署</a-button> -->
      <a-button
        type="primary"
        class="btn"
        @click="submit"
        v-if="EntInfo.status != 0"
        >签署</a-button
      >
    </div>

    <div class="main">
      <div class="main_box" id="pdfDom">
        <!-- <pdf ref="pdf" :src="getImageUrl(url)"></pdf> -->
        <p class="title">主动公示型信用承诺书</p>
        <p style="mt-10">
          为加快推进我国社会信用体系建设，加强企业诚信自律，逐步建立企业诚信经营长效机制，营造良好的市场环境，我单位<span
            style="font-weight: bold"
            >&nbsp;&nbsp;{{ EntInfo.name }}&nbsp;&nbsp;</span
          >
          社会信用代码<span style="font-weight: bold"
            >&nbsp;&nbsp;{{ EntInfo.code }}</span
          >，公开向社会承诺：
        </p>
        <p>
          一、严格执行国家有关的法律法规，依法经营，自觉维护市场经营活动正常秩序，不违背社会公德。
        </p>
        <p>
          二、遵循公平、公开.公正的竞争原则，不搞不正当竞争，严格履行承诺，信守合同。
        </p>
        <p>
          三、加强企业管理，做好教育培训工作，培育诚信经营和积极向上的企业文化。
        </p>
        <p>四、依法纳税，自觉参加各类公益活动，积极承担社会责任。</p>
        <p>五、自愿接受社会各界对本单位经营活动的监督。</p>
        <p>六、本《信用承诺书》同意向社会公开。</p>
        <p style="text-align: right">
          企业签名：<span v-if="EntInfo.status == 0"> {{ EntInfo.name }} </span>
        </p>
        <!-- <p style="text-align: right">(盖章)</p> -->
        <p style="text-align: right" v-if="EntInfo.status == 0">
          {{
            parseTime(EntInfo.createTime || EntInfo.updateTime, "{y}-{m}-{d}")
          }}
        </p>
      </div>
    </div>

    <!-- 签署信用承诺函弹框 -->
    <a-modal
      title="签署信用承诺函"
      okText="提交"
      :closable="false"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="submit"
      @cancel="handleCancel"
      :bodyStyle="{ color: '' }"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 取消 </a-button>
        <a-button
          key="submit"
          type="primary"
          :disabled="DisabledSign"
          @click="submit"
        >
          签署
        </a-button>
      </template>
      <div class="top-title">
        <a-checkbox class="check_title" v-model="checked">
          我已阅读并同意签署信用承诺函
        </a-checkbox>
      </div>
      <!-- <div class="top-title">请输入短信验证码，完成签署</div>
      <a-form
        :form="form"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 14 }"
        class="mt-30"
      >
        <a-form-item label="手机号码">
          <a-input
            v-decorator="[
              'phone',
              {
                rules: [
                  { required: true, message: '请输入手机号码' },
                  {
                    pattern: /^1[3456789]\d{9}$/,
                    message: '手机号码格式不正确',
                  },
                ],
              },
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="验证码">
          <a-row :gutter="8">
            <a-col :span="12">
              <a-input
                placeholder="请输入验证码"
                v-decorator="[
                  'verifyCode',
                  { rules: [{ required: true, message: '请输入验证码' }] },
                ]"
              />
            </a-col>
            <a-col :span="12">
              <a-button
                style="width: 100%"
                :disabled="IsDisabled"
                @click="getCode"
                type="primary"
              >
                {{ sec == 0 ? "获取用户验证码" : "还有" + sec + "秒" }}
              </a-button>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form> -->
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import { setIsSign, getCookiesUserInfo } from "@/utils/auth"; // get token from cookie
import { getVerifiyCode, checkVerifiyCode, ProofSign } from "@/apis/user/Sign";
import { getEntBaseInfo } from "@/apis/user/EntBaseInfo";
import { getCompaynInfo, signAgreement } from "@/apis/com/company";
import { parseTime } from "@/utils/common";

// import pdf from 'vue-pdf'
export default {
  // components: {
  //   pdf
  // },
  data() {
    return {
      checked: false,
      DisabledSign: false,
      IsDisabled: false,
      showDate: "",
      EntInfo: {
        status: undefined,
      },
      // url:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this, { name: "coordinated" }),
      formItemLayout: {
        labelCol: { sm: { span: 7 } },
        wrapperCol: { sm: { span: 14 } },
      },
      DataTime: "",
      // 倒计时的秒数
      sec: 0,
      gettime: "", //当前时间
    };
  },
  created() {
    this.DataTime = moment(new Date()).format("YYYY-MM-DD");
    // this.toGetEntBaseInfo();
    this.currentTime();
    this.getEntBaseInfo();
  },
  methods: {
    parseTime,
    // 获取企业基本信息
    getEntBaseInfo() {
      const id = JSON.parse(getCookiesUserInfo()).companyId;
      getCompaynInfo(id)
        .then((res) => {
          if (res.code == 200) {
            this.EntInfo = res.data;
            console.log("获取企业基本信息3333", this.EntInfo);
          }
        })
        .catch((error) => {});
    },
    currentTime() {
      setInterval(this.getTime, 500);
    },
    getTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      _this.gettime = yy + "年" + mm + "月" + dd + "日";
    },
    toGetEntBaseInfo() {
      getEntBaseInfo().then((res) => {
        console.log(666, res);
        if (res.code == 200) {
          this.EntInfo = res.data;
          console.log("toGetEntBaseInfo11111111111", this.EntInfo);

          localStorage.setItem("IsSign", res.data.isSign);
          let signDate = this.EntInfo.signDate.split(" ");
          this.EntInfo.signDate = signDate[0];
          if (this.EntInfo.signDate) {
            let arrOne = this.EntInfo.signDate.split("-");
            let arrTwo = arrOne.join(" ");
            let arrThree = arrTwo.split(" ");
            this.EntInfo.signDate =
              arrThree[0] + "年" + arrThree[1] + "月" + arrThree[2] + "日";
          }
        }
      });
    },
    showModal() {
      this.visible = true;
      this.form.getFieldDecorator("phone", {
        initialValue: this.EntInfo.phone ? this.EntInfo.phone : "",
      });
    },
    //取消按钮
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    //获取验证码
    getCode() {
      //只校验手机号字段,校验通过才发送短信
      this.form.validateFields(["phone"], (err, values) => {
        if (!err) {
          let params = {
            mobile: values.phone,
            type: 1,
          };
          this.IsDisabled = true;
          const timeout = 60;
          getVerifiyCode(params)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("短信发送成功,注意查收!");
                this.sec = timeout;
                // 写一个每隔一秒触发的计时器,避免小于0
                let timerID = setInterval(() => {
                  if (this.sec > 0 && this.sec <= timeout) {
                    this.sec--;
                  } else {
                    this.sec = 0;
                    this.IsDisabled = false;
                    clearInterval(timerID);
                  }
                }, 1000);
              } else {
                this.$message.error(res.msg);
                this.IsDisabled = false;
              }
            })
            .catch((err) => {
              if (err) {
                this.$message.error("获取短信失败!!!");
                this.IsDisabled = false;
              }
            });
        }
      });
    },
    //提交验证表单
    submit() {
      // if (this.checked == true) {
      //   this.DisabledSign = true;
      //   this.EntInfo.status = 0;
      //   signAgreement(this.EntInfo)
      //     .then((res) => {
      //       this.DisabledSign = false;
      //       if (res.code == 200) {
      //         this.$message.success("签署成功");
      //         location.reload();
      //         this.confirmLoading = false;
      //         this.visible = false;

      //         this.$store.state.issign = false;
      //         setIsSign(false);
      //         this.$emit("getEntBaseInfo"); //调用父类方法进行更新
      //       }
      //     })
      //     .catch((error) => {
      //       this.DisabledSign = false;
      //     });
      // } else {
      //   this.$message.warning("请勾选签署信用承诺函");
      // }

      this.DisabledSign = true;
      this.EntInfo.status = 0;
      signAgreement(this.EntInfo)
        .then((res) => {
          this.DisabledSign = false;
          if (res.code == 200) {
            this.$message.success("签署成功");
            location.reload();
            this.confirmLoading = false;
            this.visible = false;

            this.$store.state.issign = false;
            setIsSign(false);
            this.$emit("getEntBaseInfo"); //调用父类方法进行更新
          }
        })
        .catch((error) => {
          this.DisabledSign = false;
        });
    },
    exportPdf() {
      this.getPdf();
    },

    /**
     * 签署
     */
    // submit() {
    //   // TODO 暂时直接签署成功
    //   this.EntInfo.status = 0;
    //   editCompanyInfo(this.EntInfo)
    //     .then((res) => {
    //       if (res.code == 200) {
    //         this.confirmLoading = false;
    //         this.form.resetFields();
    //         this.$message.success("签署成功");
    //         this.$emit("getEntBaseInfo");
    //         this.getEntBaseInfo();
    //         this.$store.state.issign = false;
    //         this.visible = false;
    //       } else {
    //         this.confirmLoading = false;
    //         this.$message.warning(res.msg);
    //         // this.$message.error(res.msg);
    //       }
    //     })
    //     .catch((err) => {});
    // },

    /**
     * 手机验证码签署
     */
    // submit (e) {
    //   e.preventDefault();
    //   this.confirmLoading = true;
    //   this.form.validateFields((err, values) => {
    //     if (!err) {
    //       let params = {
    //         phoneNumbers: values.phone,
    //         code: values.verifyCode,
    //         id: this.EntInfo.id
    //       }
    //       checkVerifiyCode(params).then(res => {
    //         const { code, msg } = res
    //         if (code && code === 10) {
    //           this.confirmLoading = false
    //           this.form.resetFields()
    //           this.$message.success("签署成功")
    //           this.$emit("getEntBaseInfo")
    //           this.toGetEntBaseInfo()
    //           this.$store.state.issign = false
    //           this.visible = false
    //         } else {
    //           this.confirmLoading = false
    //           this.$message.warning(msg)
    //         }
    //       })
    //     } else {
    //       this.confirmLoading = false;
    //     }
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
::v-deep .ant-modal-content {
  border-radius: 32px;
  border: solid 6px #188af1;
}

::v-deep .ant-modal-header {
  height: 60px;
  background-color: #2a51bc;
  border-radius: 24px 24px 0px 0px;
  text-align: center;
}

::v-deep .ant-modal-title {
  color: #fff;
  font-size: @font26;
}

::v-deep .ant-modal-footer {
  margin: 0 24px;
  border-top: 0;
}

.top-title {
  text-align: center;
  color: @text-color-303;
  font-size: @font22;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9e9e9;
}

.sign {
  .sign-top {
    height: 80px;
    line-height: 80px;
    background-color: #ffffff;
    border: 1px dashed #92a7d6;
    text-align: center;
    border-radius: 4px;

    .btn {
      height: 32px;
      width: 110px;
      border-radius: 16px;
      outline: none;
    }

    .downBtn {
      margin-right: 72px;
    }
  }

  .main {
    background-color: #e4e7ed;
    border-radius: 4px;
    padding: 24px 0;
    width: 100%;
    height: 100%;

    .main_box {
      margin: 0 auto;
      width: 835px;
      background-color: #ffffff;
      padding: 40px;

      .title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ebebeb;
      }

      p {
        font-size: 16px;
        text-indent: 2em;
        line-height: 30px;
        margin: 20px 0;
      }
    }
  }
}

.check_title {
  font-size: 18px;
  font-weight: bold;
}
</style>
